import styled from "styled-components";

import typeBg from '../../../../../assets/image/ConfigManagement/type_bg.png';
import quanxianbiaoshi from '../../../../../assets/image/ConfigManagement/quanxianbiaoshi.png';


export const TreeFZBox = styled.div`
   width: 50rem;
   height: 50rem;
`


export const TreeTitleBox = styled.div<{
    youyi: number
}>`
    height: 4.4rem;
    display: flex;
    align-items: center;
    margin-left: ${props => `${props.youyi * 2}rem`};
    .add_box{
        font-size: 1.4rem;
        color: #00AEFF;
        margin-right: 1rem;

    }
    .jiedian{
        font-size: 1.4rem;
        color: #00AEFF;
        margin-right: 1rem;
    }
    .tree_name_box{
        font-size: 1.4rem;
        color: #CEE2FA; 
        margin-right: 1rem;
    }
    .name_color{
        color: #00AEFF;
    }
    .terr_type_box{
        width: 5rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: url(${typeBg});
        background-size: 100% 100%;
        font-size: 1.2rem;
        color: #CEE2FA;
        margin-right: 1rem;
    }
    .terr_biaoshi_box{
        width: 19.5rem;
        height: 2.8rem;
        padding: 0 1rem;
        line-height:2.8rem;
        box-sizing: border-box;
        font-size: 12px;
        color: #92A9C4;
        background: url(${quanxianbiaoshi});
        background-size: 100% 100%;
    }
    .iconfont {
        transition: transform 0.5s ease; 
    }
    .icon_xuanzhuan{
        transform: rotate(90deg);
    }
    .caozuo{
        font-size: 1.4rem;
        color: #1C84B4;
        margin-right: 1rem;
    }
`

export const TreeFZItemBox = styled.div`    

`

export const TreeUlBox = styled.div`    
        max-height: 100rem; // 控制内容区域的最大高度
        overflow: hidden;
        transition: height 1s linear;
`